<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用bootstrap绘制form表单</title>
<!-- Bootstrap core CSS -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet">
<!-- bootstrap-datepicker-1.9.0-dist -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css"
	rel="stylesheet">
<!-- 分页插件 -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/paginationjs-master/dist/pagination.css"
	rel="stylesheet">
<!-- 模态框插件 -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/BootstrapEx/css/bootstrapEx.css"
	rel="stylesheet">
	
<!-- Bootstrap core JavaScript-->
<!-- Placed at the end of the document so the pages load faster -->
<!--import jquery before bootstrap javascript-->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- bootstrap-datepicker-1.9.0-dist -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script>

<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- My97DatePicker -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"></script>

<!-- 分页插件 -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/paginationjs-master/dist/pagination.min.js"></script>

<!-- 模态框插件 -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/BootstrapEx/js/bootstrapEx.js"></script>

<script type="text/javascript">
	// 给日期输入框添加事件处理
	$(function() {
		// dom ready 之后直接进行执行查询操作，显示新增结果信息
		doAjaxQuery();
	});
	
	
	///////////////////////////////////////////////////////////
	///// ajax查询
	
	function doAjaxQuery(){
		// 使用ajax进行查询
		$.ajax({
				// 请求类型
			   type: "POST",
				// 请求的url，和form的action属性值一样
			   url: "${pageContext.servletContext.contextPath}/UserInfoAjaxQueryControl",
				// 发送的表单数据，按照如下格式提供即可："name=John&location=Boston"
			   data:  "", // 序列化表单参数，获取一个序列化的字符串，用于ajax请求，必须在form中才可以使用
			   // response响应的数据类型，默认是文本类型，可以指定为 xml、html、json等类型
			   dataType:"json",
			   // 回调函数
			   success: function(data){	
			    
			     // 进行dom操作，局部修改浏览器的显示数据，进行局部刷新数据
				 if(data != null){
					 
					 // 逻辑分页（假分页），调用分页插件进行分页处理					
					 
					 $('#myPagination').pagination({
    						dataSource: data, // 分页的数据源，假分页，给定ajax查询的结果集 data即可
    						pageSize: 6, // 每页显示的记录数
    						showGoInput: true, // 是否显示 go 跳转输入框
    						showGoButton: true,  // 是否显示 go 跳转按钮
    						// 当前页刷新的回调函数
    						callback: function(paginData, pagination) {
    						// 分页插件的回调函数，主要是每次改变页码之后，就会触发该函数，通过该函数可以局部刷新数据，达到一个分页显示的效果
    						// paginData是当前页面需要显示的数据， 回调时，需要把paginData中的数据进行局部渲染，显示当前页的数据内容
    						
    						// 进行分页的数据显示，也就是ajax查询的dom操作
    						// 组合的html内容穿
							var strHtml = "";
    						$.each( paginData, function(index, eachVal){
										  // 此处的eachVal是被遍历的结果集 data中的一个元素
										  // 根据后台封装的结果集结构，eachVal是一个实体类对象
										  					  
										  strHtml+="<tr>";
										  
										  strHtml+="<th scope='row'>"
										  strHtml+=(index+1);
										  strHtml+="</th>";
										  
										  strHtml+="<td>";
										  strHtml+=eachVal.user_Name;
										  strHtml+="</td>";
										  
										  strHtml+="<td>";
										  strHtml+=eachVal.user_Createtime;
										  strHtml+="</td>";
										  
										  strHtml+="<td>";
										  strHtml+="<img alt='头像' src='${pageContext.servletContext.contextPath}/";
										  strHtml+=eachVal.user_img;
										  strHtml+="' width='40px' height='40px'>"
										  strHtml+="</td>";
										  
										  strHtml+="</tr>";
										});
							    	
							    	// end each遍历方法
									 // 将要显示的html，使用dom操作，添加到tbody标签中
									 $("#tbody1").html(strHtml);
							    }
							});
					 
				 }
			   }

			});
	}
	
	
	//////////////////////////////////////////////////////////
	
</script>

<style>
#maindiv {
	width: 80%;
	padding-top: 10px;
	/* margin: 0px, auto; */
	padding-left: 50px;
}
</style>
</head>
<body>
	<div id="maindiv">		
		<!-- 显示查询结果部分-->
		<div class="row">

			<table class="table table-hover">
				<thead>
					<tr>
						<th>序号</th>
						<th>用户名</th>
						<th>创建日期</th>	
						<th>头像</th>						
					</tr>
				</thead>
				<tbody id="tbody1">
				<!-- 此处根据ajax回调的结果数据集进行动态拼写html的内容 -->	
				</tbody>
			</table>
			
		</div>
		<div class="row">
		<!-- 分页div -->
		<div id="myPagination"></div>
		</div>
	</div>
</body>
</html>